 <template>
  <d2-container>
    <el-dialog
      title="战败客户"
      :visible.sync="dialogVisible4Zhanbkh"
      width="640px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="80px" size="mini">
        <el-row style="width:100%">
          <el-col :span="23">
            <el-form-item label="原因" placeholder="" prop="carNo">
              <el-cascader
                v-model="value"
                :options="options4ZhanbReason"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4Zhanbkh = false" icon="el-icon-close" size="mini">取 消</el-button>
        <el-button type="primary" @click="updateNote()" icon="el-icon-check" size="mini">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="保单数据"
      :visible.sync="dialog4PolicyVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="110px" size="mini">
        <el-row style="width:100%">
          <el-form-item label="险种" placeholder="" prop="carNo">
            <el-input type="textarea" :rows="5" v-model="form.insuranceType"></el-input>
          </el-form-item>
          <el-form-item label="商业险" placeholder="" prop="carNo">
            <el-input v-model="form.commerceinsuranceFee" type="number"></el-input>
          </el-form-item>
          <el-form-item label="交强险" placeholder="" prop="carNo">
            <el-input v-model="form.saliFee" type="number"></el-input>
          </el-form-item>
          <el-form-item label="车船税" placeholder="" prop="carNo">
            <el-input v-model="form.vehicleVesselTaxFee" type="number"></el-input>
          </el-form-item>
          <el-form-item label="优惠金额" placeholder="" prop="carNo">
            <el-input v-model="form.discountAmount" type="number"></el-input>
          </el-form-item>
          <el-form-item label="车主" placeholder="" prop="carNo">
            <el-input v-model="form.carOwner"></el-input>
          </el-form-item>
          <el-form-item label="车主身份证" placeholder="" prop="carNo">
            <el-input v-model="form.carOwnerIdCard"></el-input>
          </el-form-item>
          <el-form-item label="被保险人" placeholder="" prop="carNo">
            <el-input v-model="form.recognizee"></el-input>
          </el-form-item>
          <el-form-item label="被保险人身份证" placeholder="" prop="carNo">
            <el-input v-model="form.recognizeeIdCard"></el-input>
          </el-form-item>
          <el-form-item label="起保日期" placeholder="" prop="carNo">
            <el-date-picker v-model="form.commencemenDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="邮寄地址" placeholder="" prop="carNo">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="支付方式" placeholder="" prop="carNo">
            <el-select v-model="form.payment" placeholder="请选择" size="small">
              <el-option
                v-for="item in paywayList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="保单类型" placeholder="" prop="carNo">
            <el-select v-model="form.newRenewalStatus" placeholder="请选择" size="small">
              <el-option
                v-for="item in policyTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="赠送礼品" placeholder="" prop="carNo">
            <el-select v-model="form.gift" placeholder="请选择" size="small">
              <el-option
                v-for="item in giftList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开票信息" placeholder="" prop="carNo">
            <el-input type="textarea" :rows="5" v-model="form.billingInformation"></el-input>
          </el-form-item>
          <el-form-item label="备注" placeholder="" prop="carNo">
            <el-input type="textarea" :rows="5" v-model="form.remark"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog4PolicyVisible = false" icon="el-icon-close" size="mini">取 消</el-button>
        <el-button type="primary" @click="createPolicy()" icon="el-icon-check" size="mini">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="通话记录"
      :visible.sync="dialogDetailVisible"
      width="640px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="80px" size="mini">
        <el-row style="width:100%">
          <el-col :span="23">
            <el-form-item label="备注" placeholder="" prop="carNo">
              <el-input type="textarea" :rows="5" v-model="form.note"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')" icon="el-icon-close" size="mini">取 消</el-button>
        <el-button type="primary" @click="updateNote()" icon="el-icon-check" size="mini">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="短信记录"
      :visible.sync="dialogSendSmsVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="80px" size="mini">
        <el-row style="width:100%">
          <el-col :span="23">
            <el-form-item label="号码" placeholder="" prop="carNo">
              <el-select v-model="phoneList_value" placeholder="请选择" size="small">
                <el-option
                  v-for="item in phoneList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23" style="width:700px">
            <el-form-item label="内容" placeholder="" prop="carNo">
              <el-input type="textarea" :rows="5" v-model="form.note"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-table :data="list4Sms" highlight-current-row stripe style="width: 100%">
              <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
              <el-table-column align="center" label="发送时间" width="150">
                <template slot-scope="scope">
                  <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{m}:{s}')}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="内容" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.content}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')" icon="el-icon-close" size="mini">取 消</el-button>
        <el-button type="primary" @click="sendMessage()" icon="el-icon-check" size="mini">发 送</el-button>
      </div>
    </el-dialog>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="分类" prop="username">
        <el-select v-model="formInline.clientType" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车型">
        <el-input v-model="formInline.vehicleType" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="车牌">
        <el-input v-model="formInline.carNo" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="车架">
        <el-input v-model="formInline.vehicleNo" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="发动机">
        <el-input v-model="formInline.engineNumber" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="车主">
        <el-input v-model="formInline.carOwner" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="被保险人">
        <el-input v-model="formInline.insured" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="被保险人身份证">
        <el-input v-model="formInline.insuredIdCard" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="formInline.mobilePhone" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="联系电话2">
        <el-input v-model="formInline.standbyMobile" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="初登日期">
        <el-date-picker
          v-model="formInline.firstRegistrationDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="交强险日期">
        <el-date-picker
          v-model="formInline.clivtaEndDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="商业险日期">
        <el-date-picker
          v-model="formInline.viEndDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="备注">
        <el-input
          v-model="formInline.remark"
          :disabled="false"
          type="textarea"
          :rows="4"
          style="width:400px"
        ></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="updateSellData">更 新</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <!-- <el-button @click="handleCreate" type="primary" icon="el-icon-plus" size="mini">新 增</el-button> -->
    <el-button @click="handleRefresh" type="primary" icon="el-icon-refresh" size="mini">刷 新</el-button>&nbsp;
    <el-select v-model="phoneList_value" placeholder="请选择" size="small">
      <el-option
        v-for="item in phoneList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>&nbsp;
    <el-button size="mini" type="success" @click="bridgingPhone()" icon="fa fa-phone" v-loading="isLoading" element-loading-text="通讯中...">&nbsp;拨 打</el-button>&nbsp;
    <el-date-picker v-model="reserveDateTime" type="datetime" placeholder="预约时间" size="mini"></el-date-picker>&nbsp;
    <el-button @click="reserve" type="primary" icon="fa fa-clock-o" size="mini">&nbsp;预约</el-button>&nbsp;
    <el-select v-model="value2" placeholder="请选择" size="mini">
      <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>&nbsp;
    <el-button @click="handleMove" type="primary" icon="fa fa-magic" size="mini">&nbsp;移动数据</el-button>
    <el-button @click="suanf" type="primary" icon="fa fa-automobile" size="mini">&nbsp;算费</el-button>
    <el-button
      @click="showSemdSmsDlg"
      type="primary"
      icon="fa fa-commenting-o"
      size="mini"
    >&nbsp;发短信</el-button>
    <el-table :key="tableKey" :data="list" highlight-current-row stripe style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
      <el-table-column align="center" label="分机号">
        <template slot-scope="scope">
          <span>{{scope.row.extensionNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拨打时间" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.createDate}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="通话时长">
        <template slot-scope="scope">
          <span>{{scope.row.talkTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="录音" width="250">
        <template slot-scope="scope">
          <vue-audio-native :url="scope.row.mediaUrl" :showCurrentTime="false"></vue-audio-native>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.note}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleUpdate(scope.row)"
            icon="el-icon-edit"
          >写备注</el-button>
          <!-- <el-button
            v-if="sys_user_del"
            size="mini"
            type="danger"
            @click="deletes(scope.row)"
            icon="el-icon-delete"
          ></el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </d2-container>
</template>

<script>
import * as callcenter from "@/api/callcenter";

import { deptRoleList, fetchDeptTree } from "@/api/role";
import { mapGetters, mapState } from "vuex";
import ElRadioGroup from "element-ui/packages/radio/src/radio-group";
import ElOption from "element-ui/packages/select/src/option";
// Import component
import Loading from "vue-loading-overlay";
// Import stylesheet
import "vue-loading-overlay/dist/vue-loading.css";

import * as newcomer from "@/api/newcomer";

import {
  putObj,
  insertBookingByClientId,
  batchMoveSellData
} from "@/api/customer";

import * as clipboard from "clipboard-polyfill";
import * as sendSms from "@/api/sendsms";
import * as policy from "@/api/policy";

function padLeftZero(str) {
  return ("00" + str).substr(str.length);
}

export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  let o = {
    "M+": date.getMonth() + 1,
    "d+": date.getDate(),
    "h+": date.getHours(),
    "m+": date.getMinutes(),
    "s+": date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + "";
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? str : padLeftZero(str)
      );
    }
  }
  return fmt;
}

export default {
  components: {
    ElOption,
    ElRadioGroup,
    Loading
  },
  name: "table_user",
  data() {
    return {
      options4ZhanbReason:[{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
      dialogVisible4Zhanbkh: false,
      giftList: [],
      paywayList: [],
      policyTypeList: [],
      dialog4PolicyVisible: false,
      list4Sms: [],
      sms_prefix: null,
      dialogSendSmsVisible: false,
      value2: null,
      // 预约时间
      reserveDateTime: null,
      // 移动数据
      options2: [],
      // 数据分类
      options3: [],
      phoneList: [],
      phoneList_value: null,
      formInline: null,
      sellDataId: null,
      table: {
        columns: [],
        data: [],
        size: "mini",
        stripe: true,
        border: true
      },
      callList: null,
      isLoading: false,
      treeDeptData: [],
      checkedKeys: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      list: null,
      total: null,
      listQuery: {
        current: 1,
        pageSize: 50
      },
      form: {
        id: undefined,
        note: undefined,
        carOwner: null,
        carOwnerIdCard: null,
        recognizee: null,
        recognizeeIdCard: null
      },
      rules: {
        note: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur"
          },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur"
          }
        ]
      },
      statusOptions: ["0", "1"],
      rolesOptions: [],
      dialogFormVisible: false,
      dialogDetailVisible: false,
      dialogDeptVisible: false,
      dialogImportExcelVisible: false,
      dialogAssignVisible: false,
      userAdd: false,
      userUpd: false,
      userDel: false,
      dialogStatus: "",
      textMap: {
        update: "编辑客户信息",
        create: "新增客户信息",
        import: "导入业务数据",
        assign: "分配业务数据"
      },
      isDisabled: {
        0: false,
        1: true
      },
      tableKey: 0,
      canBeCall: true,
      suanf_url: ""
    };
  },

  filters: {},

  computed: {
    // ...mapGetters(['permissions']),
    ...mapState("d2admin/user", ["info"])
  },

  created() {
    // console.log("id: ", this.$route.query.id);
    this.sellDataId = this.$route.query.id;
    this.$route.meta.title = this.$route.query.clientName;
    this.$route.meta.cache = false;
    console.log(this.$route.query.obj);
    this.formInline = this.$route.query.obj;

    this.phoneList = [
      { label: this.formInline.mobilePhone, value: 1 }
    ];

    if(this.formInline.standbyMobile != undefined && this.formInline.standbyMobile != "")
      this.phoneList.push({ label: this.formInline.standbyMobile, value: 2 })

    this.phoneList_value = 1;

    this.getList();

    newcomer.queryDictListByType("clientGrouping").then(resp => {
      console.log(resp);
      this.options2 = resp.records;
    });

    newcomer.queryDictListByType("clientType").then(resp => {
      console.log(resp);
      this.options3 = resp.records;
    });

    newcomer.queryDictListByType("sms_prefix").then(resp => {
      console.log(resp);
      this.sms_prefix = resp.records[0].value;
    });

    newcomer.queryDictListByType("gift").then(resp => {
      console.log(resp);
      this.giftList = resp.records;
    });

    newcomer.queryDictListByType("payWay").then(resp => {
      console.log(resp);
      this.paywayList = resp.records;
    });

    newcomer.queryDictListByType("policyType").then(resp => {
      console.log(resp);
      this.policyTypeList = resp.records;
    });

    newcomer.queryDictListByType("suanf_url").then(resp => {
      console.log(resp);
      this.suanf_url = resp.records[0].value;
    });
  },

  // beforeRouteUpdate(to, from, next) {
  //   this.sellDataId = to.query.id;
  //   this.$route.meta.title = to.query.clientName;
  //   console.log(to.query.obj);
  //   this.formInline = to.query.obj;
  //   this.phoneList = [
  //     { label: this.formInline.mobilePhone, value: 1 },
  //     { label: this.formInline.standbyMobile, value: 2 }
  //   ];

  //   this.getList();
  //   next();
  // },

  methods: {
    handleChange(value) {
      console.log(value);
    },

    createPolicy() {
      this.form.clientId = this.sellDataId;
      policy.insert(this.form).then(resp => {
        console.log(resp);
        if(resp.status == "SUCCEED") {
          this.$notify({
            title: "提示",
            message: "操做成功",
            type: "success",
          });

          this.dialog4PolicyVisible = false;

          batchMoveSellData({ ids: [this.sellDataId], status: "clientGrouping4" }).then(resp => {
            console.log(resp);
          });

        } else {
          this.$notify({
            title: "提示",
            message: resp.errorMessage,
            type: "error",
          });
        }
        
      });
    }, 

    showSemdSmsDlg() {
      this.dialogSendSmsVisible = true;

      this.listQuery = {};
      this.listQuery.current = 1;
      this.listQuery.pageSize = 99;
      this.listQuery.clientid = this.sellDataId;

      sendSms.fetchList(this.listQuery).then(response => {
        this.list4Sms = response.data.records;
      });
    },

    suanf() {
      clipboard.writeText(this.formInline.carNo);

      window.open(
        //"http://bao.91bihu.com/DoQuote/INDEX?carNo=" + this.formInline.carNo
        this.suanf_url + this.formInline.carNo
      );
    },

    updateSellData() {
      this.formInline.lastCallTime = null;
      putObj(this.formInline).then(resp => {
        if (resp.status != "SUCCEED") {
          this.$notify({
            title: "提示",
            message: resp.errorMessage,
            type: "error",
            duration: 2000
          });
          return;
        }

        this.$notify({
          title: "成功",
          message: "修改成功",
          type: "success",
          duration: 2000
        });
      });
    },

    reserve() {
      if (this.reserveDateTime == null) {
        this.$message({
          type: "error",
          message: "还没选择预约时间"
        });
        return;
      }

      let newDt = formatDate(this.reserveDateTime, "yyyy-MM-dd hh:mm:ss");
      insertBookingByClientId({
        clientId: this.formInline.id,
        bookingTime: newDt
      }).then(resp => {
        console.log(resp);
        if (resp.status == "SUCCEED") {
          this.$message({
            type: "success",
            message: "预约成功"
          });
        } else {
          this.$message({
            type: "error",
            message: "预约失败"
          });
        }
      });
    },

    handleMove() {
      if (this.value2 == null) {
        this.$message({
          type: "error",
          message: "请选择移动位置"
        });
        return;
      }

      // 如果是成交客户进入创建保单流程
      if (this.value2 == "clientGrouping4") {
        this.dialog4PolicyVisible = true;
        
        this.form.carOwner = this.formInline.carOwner;
        this.form.recognizee = this.formInline.insured;
        this.form.recognizeeIdCard = this.formInline.insuredIdCard;
        return;
      }

      // 如果选择战败
      // if (this.value2 == "clientGrouping1") {
      //   this.dialogVisible4Zhanbkh = true;
       
      //   return;
      // }

      let ids = [];
      ids.push(this.formInline.id);

      // clientGrouping1
      // {ids: [], status: 'clientGrouping1'}
      batchMoveSellData({ ids: ids, status: this.value2 }).then(resp => {
        console.log(resp);
        if (resp.status == "SUCCEED") {
          this.$message({
            type: "success",
            message: "操作成功"
          });

          this.getList();
        } else {
          this.$message({
            type: "error",
            message: "操作失败"
          });
        }
      });
    },

    updateNote() {
      let input = {
        id: this.form.id,
        note: this.form.note
      };
      
      callcenter.putObj(input).then(resp => {
        console.log(resp);
        if (resp.status == "success") {
          this.dialogDetailVisible = false;
          this.$notify({
            title: "成功",
            message: "添加通话备注成功",
            type: "success",
            duration: 2000
          });
        }
      });
    },

    sendMessage() {
      sendSms
        .send(
          this.sellDataId,
          this.phoneList_value,
          this.sms_prefix + this.form.note
        )
        .then(resp => {
          console.log(resp);
          if (resp.status == "SUCCEED") {
            this.$notify({
              title: "提示",
              message: "操作成功",
              type: "success",
              duration: 2000
            });
          }
        });
    },

    handleUpdate(row) {
      this.dialogDetailVisible = true;
      this.form = row;
    },

    handleRefresh() {
      this.getList();
    },

    bridgingPhone() {
      if(this.isLoading)
        return;

      if (this.phoneList_value == null) {
        this.$message({
          type: "error",
          message: "选择拨那个号？"
        });
        return;
      }

      this.isLoading = true;

      callcenter
        .callPhone({
          clientId: this.sellDataId,
          userId: this.info.id,
          tag: this.phoneList_value
        })
        .then(response => {
          this.isLoading = false;
          console.log(response);
          
          if (response.data && response.data.id) {
            let id = response.data.id;
            console.log(id);
            this.getList();

          } else {
            this.$message({
              type: "error",
              message: "呼叫本机分机失败, 尝试重启本机软电话。检查分机号是否正确!"
            });
          }
        });
    },

    getList() {
      this.isLoading = true;

      this.listQuery.current = 1;
      this.listQuery.clientId = this.sellDataId;
      this.listQuery.one = 1;

      callcenter.fetchList(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.isLoading = false;
      });
    },

    // handleCreate() {
    //   this.$prompt("请输入备注", "提示", {
    //     confirmButtonText: "提交",
    //     cancelButtonText: "取消",
    //     inputType: "textarea",
    //     closeOnClickModal: false
    //   }).then(({ value }) => {
    //     let obj = {
    //       id: this.sellDataId,
    //       note: value
    //     };

    //     callcenter.putObj(obj).then(resp => {
    //       if (resp.status == "success")
    //         this.$notify({
    //           title: "成功",
    //           message: "添加通话备注成功",
    //           type: "success",
    //           duration: 2000
    //         });
    //     });
    //   });
    // },

    cancel(formName) {
      this.dialogSendSmsVisible = false;
      this.dialogDetailVisible = false;
      this.$refs[formName].resetFields();
    },

    update(formName) {
      const set = this.$refs;
      // this.form.role = this.role
      console.log(this.form);
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form.password = undefined;
          putObj(this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },

    deletes(row) {
      this.$confirm("确认删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(row.id).then(() => {
          this.getList();
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.d2-mb {
  float: left;
  margin-right: 20px;
}
.d2-mb .el-button i {
  margin-right: 4px;
}
</style>
